import React from 'react';
import {TAB} from './constants';
import {getLastReply,getTopDetail} from './service'
import moment from 'moment';
import classNames from 'classnames';
import './topic.css'
import {Loading} from "./Component";

export class Topic extends React.Component {

    render() {
        const item = this.props.topic;
        return <li id={item.id}>
            <h4>{item.title}</h4>
            <div>{item.content}</div>
        </li>
    }
}

export class TopicTitle extends React.Component {

    constructor(props) {
        super(props);
        this.lastReply = {};
        this.state = {
            loading: false
        }
    }

    componentDidMount() {
        const {id} = this.props.topic;
        getLastReply(id).then(data =>{
            this.lastReply = data || {};
            this.setState({
                loading: true
            });
        });
    }

    render() {
        if (!this.state.loading) {
            return <Loading/>;
        }
        const item = this.props.topic;
        const {author, last_reply_at:lastReplyTime} = item;
        const {author:replyAuthor} = this.lastReply;
        return <div id ={item.id} className={classNames("cell")} onClick={this.handlerClick}>
            <Author {...author}/>
            <Count {...item}/>
            <Tab {...item}/>
            <Title title={item.title}/>
            <LastReply {...replyAuthor} lastReplyTime={lastReplyTime}/>
        </div>
    }

    handlerClick = () => {
        // alert(item.id);
        console.log(this.props.topic);
        // getTopDetail(item.id).then(data=>console.log(data));
    }
}

class Author extends React.Component {
    render() {
        const {avatar_url, loginname} = this.props;
        return <a href={`/user/${loginname}`} className={"user_avatar pull-left"}>
            <img src={avatar_url} alt={loginname} title={loginname}/>
        </a>
    }
}

class Count extends React.Component {
    render() {
        const {reply_count:replyCount, visit_count:visitCount} = this.props;
        return <span className={classNames("reply_count pull-left")}>
            <span className={classNames("count_of_replies")} title={"回复数"}>{replyCount}</span>
            <span className={classNames("count_seperator")}>/</span>
            <span className={classNames("count_of_visits")} title={"点击数"}>{visitCount}</span>
        </span>
    }
}

class Tab extends React.Component {
    getTab() {
        const {tab} = this.props;
        return TAB[tab];
    }
    render() {
        const tab = this.getTab();
        return (
            <span className={classNames("put_top")}>
                {tab}
            </span>
        );
    }
}

class Title extends React.Component{
    render() {
        return (
            <a className={classNames("topic_title")} href ="script:void()">
                {this.props.title}
            </a>
        );
    }
}

class LastReply extends React.Component{
    render() {
        const {avatar_url, loginname} = this.props;
        return (
            <a href={"./"} className={classNames("last_time pull-right")}>
                <img className={"user_small_avatar"} src={avatar_url} alt={loginname} title={loginname}/>
                <span className={classNames("last_active_time")}>{this.formatterDate()}</span>
            </a>
        );
    }

    formatterDate() {
        const {lastReplyTime} = this.props;
        return moment(lastReplyTime).fromNow();
    }
}
